<template>
  <div class="page-container">
    <list-searcher :searchList="searchList" v-model:searchForm="queryParam" @loadData="loadData" />
    <table-index :table="table" @loadData="loadData">
      <template #clientuser="{ record }">
        <div>{{ record.linkman }}</div>
        <div>{{ record.mobile }}</div>
      </template>
      <template #placeorder="{ record }">
        <div>自驾短租：{{ record.shortOrderTotal || '-' }}</div>
        <div>自驾长租：{{ record.longTermOrderTotal || '-' }}</div>
      </template>
      <template #consumption="{ record }">
        <div>自驾短租：{{ record.shortOrderTotalAmount || '-' }}</div>
        <div>自驾长租：{{ record.longTermOrderTotalAmount || '-' }}</div>
      </template>
      <template #ecAuthenticationStatusName="{ record }">
        <div>{{ record.ecAuthenticationStatusName }}</div>
        <div v-if="record.ecAuthenticationStatus === 0"> 原因: {{ record.authenticationFailedReason }} </div>
      </template>
    </table-index>
  </div>
  <memberorder ref="orderlist" />
  <!-- 导入 -->
  <import-modal ref="imoportRef" action="/clientInfo/importExcel" download-import="/企业客户导入模板.xlsx" @ok="loadData" />
</template>

<script setup name="EpClientList">
  import memberorder from './components/member-order.vue'
  import { useExport } from '@/hooks/list'
  import { useTable, useFetchTableDataApi } from '@/hooks/table'
  import { getclientInfoList, clientInfoExportExcel } from '@/api/market/clientInfo'
  import { onMounted, reactive, computed, ref } from 'vue'
  import useNavigate from '@/hooks/useNavigate'
  import { usePageDict } from '@/hooks/useDict'

  const { navigateTo } = useNavigate()
  // 接口参数（不包含page信息）
  const queryParam = reactive({})
  const imoportRef = ref(null) // 导入组件
  const orderlist = ref(null)
  const clientInfoPageData = usePageDict('clientInfoPageData')
  console.log(clientInfoPageData)

  // 导出事件
  const handleExport = () => {
    useExport(clientInfoExportExcel, queryParam)
  }
  // 查询条件
  const searchList = computed(() => {
    return [
      { label: '企业名称', prop: 'clientNameLike', type: 'a-input' },
      { label: '企业联系人', prop: 'linkmanLike', type: 'a-input' },
      { label: '联系人手机号', prop: 'linkmanPhoneLike', type: 'a-input' },
      {
        label: '电子合同认证状态',
        prop: 'ecAuthenticationStatus',
        type: 'a-select',
        options: clientInfoPageData.IdentStatusEnum,
      },
    ]
  })

  // 初始化
  const init = () => {
    loadData()
  }
  // table 配置
  const table = useTable({
    columns: [
      { title: '企业名称', dataIndex: 'clientName', width: 260, fixed: 'left' },
      { title: '企业联系人', dataIndex: 'linkman', width: 120, slotName: 'clientuser' },
      { title: '电子合同认证状态', dataIndex: 'ecAuthenticationStatusName', width: 140, slotName: 'ecAuthenticationStatusName' },
      { title: '累计下单', dataIndex: 'shortOrderNum', unit: '单', width: 150, slotName: 'placeorder' },
      { title: '累计消费', dataIndex: 'shortOrderAmount', unit: '元', width: 150, slotName: 'consumption' },
      { title: '创建时间', dataIndex: 'createTime', width: 170 },
      { title: '创建人', dataIndex: 'createUserName', width: 100 },
    ],
    operates: [
      {
        label: '详情',
        permission: 'svms:market:bazaar:clientInfo.detail',
        method: (record) => {
          navigateTo('/client-info/detail/' + record.id, '企业客户详情-' + record.clientName)
        },
      },
      {
        label: '编辑',
        permission: 'svms:market:bazaar:clientInfo.edit',
        method: (record) => {
          navigateTo('/client-info/edit/' + record.id, '企业客户编辑-' + record.clientName)
        },
      },
    ],
    buttons: [
      {
        mode: 'import',
        label: '导入',
        permission: 'svms:market:bazaar:clientInfo.import',
        method: () => {
          imoportRef.value.show()
        },
      },
      {
        mode: 'import',
        label: '导出',
        permission: 'svms:market:bazaar:clientInfo.export',
        method: () => handleExport(),
      },
      {
        type: 'primary',
        icon: 'plus',
        permission: 'svms:market:bazaar:clientInfo.add',
        label: '新增',
        method: () => handleAdd(),
      },
    ],
  })

  // 列表接口调用
  const loadData = useFetchTableDataApi(table, queryParam, getclientInfoList)
  // 添加事件
  const handleAdd = () => {
    navigateTo('/client-info/create')
  }

  // 短长租数量
  const shortRecords = (id, orderType) => {
    console.log(id)
    orderlist.value.openModal(id, 'client', orderType)
  }

  defineExpose({
    loadData,
  })

  onMounted(() => {
    init()
  })
</script>

<style lang="less" scoped>
  .member-label {
    padding: 0 8px;
    border-radius: 2px;
    font-size: 12px;
    font-weight: 500;
    margin-left: 8px;
  }
  .member-fx {
    background: #ffece8;
    color: #f53f3f;
  }
  .member-yz {
    background: #e8ffea;
    color: #00b42a;
  }
  .card-w {
    color: #f53f3f;
  }
  .dateover {
    color: #86909c;
  }
  .status-z {
    color: #00b42a;
  }
  .status-h {
    color: #f53f3f;
  }
  .button-border {
    cursor: pointer;
    text-align: center;
    border-radius: 2px;
    padding: 0 7px;
    border: 1px solid #1890ff;
    color: #1890ff;
    font-size: 12px;
  }
  .margin-l-8 {
    margin-left: 8px;
  }
</style>
